<template>
    <div style="display: flex;justify-content: space-between;align-items: center;">
        <div>
            <h1 class="title">分发任务列表</h1>
        </div>
        <div>
            <el-button type="primary"  @click="createDTDrawer">
                <el-icon>
                    <Plus />
                </el-icon>
                创建</el-button>
        </div>
    </div>
    <div>
        <el-table  table-layout='auto'       highlight-current-row
            :data="dtList.slice((pagination.curPage - 1) * pagination.pageSize, pagination.curPage * pagination.pageSize)"
            border style="width: 100%">
            <el-table-column prop="id" label="ID" width="90" />
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="desc" label="简介" />
            <el-table-column label="群组数量" width="120">
                <template #default="scope">
                    {{ scope.row?.userGroupIdList.length }}
                </template>
            </el-table-column>
            <el-table-column label="问卷数量" width="120">
                <template #default="scope">
                    {{ scope.row?.questionnaireIdList.length }}
                </template>
            </el-table-column>
            <el-table-column prop="startTime" label="开始时间" />
            <el-table-column prop="endTime" label="结束时间" />
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button type="primary" text size="small" @click="editDT(scope.row)">编辑</el-button>
                    <el-button type="primary" text size="small"
                        @click="() => { this.$router.push(`/userCenter/anaDistributeTask/${scope.row.id}`) }">分析</el-button>

                    <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" width="200" title="删除后无法恢复，是否确认删除?"
                        @confirm="deleteDTByID(scope.row)">
                        <template #reference>
                            <el-button type="danger" text size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="pagination">
        <el-pagination v-model:currents-page="pagination.curPage" v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 25, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="dtList.length" />
    </div>

    <el-drawer v-model="dtDrawerVisible" direction="rtl">
        <template #header>
            <h4>用户组</h4>
        </template>
        <template #default>
            <div>
                <el-form v-model="curDT" label-position="top">
                    <el-form-item label="任务名称">
                        <el-input v-model="curDT.title"></el-input>
                    </el-form-item>
                    <el-form-item label="任务简介">
                        <el-input v-model="curDT.desc"></el-input>
                    </el-form-item>
                    <el-form-item label="指定问卷">
                        <el-select v-model="curDT.questionnaireIdList" multiple placeholder="请选择问卷" style="width: 100%">
                            <el-option v-for="qn in qnList" :key="qn.id" :label="qn.title" :value="'' + qn.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="定向群组">
                        <el-select v-model="curDT.userGroupIdList" multiple placeholder="请选择用户" style="width: 100%">
                            <el-option v-for="userGroup in ugList" :key="userGroup.id" :label="userGroup.title"
                                :value="'' + userGroup.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开始时间">
                        <el-date-picker v-model="curDT.startTime" type="datetime" placeholder="选择任务开始时间"
                            format="YYYY/MM/DD HH:mm:ss" value-format="YYYY/MM/DD HH:mm:ss" />
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker v-model="curDT.endTime" type="datetime" placeholder="选择任务结束时间"
                            format="YYYY/MM/DD HH:mm:ss" value-format="YYYY/MM/DD HH:mm:ss" />
                    </el-form-item>
                </el-form>
            </div>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="DTDrawerVisible = false">取消</el-button>
                <el-button type="primary" @click="createDT(curDT)">确认</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<script>

import { useUserStore } from "../../store/userStore.js";
import { POST } from '../../util/axios.js'
export default {
    data() {
        return {
            dtDrawerVisible: false,
            dtList: [],
            pagination: {
                curPage: 1,
                pageSize: 10
            },
            ugList: [],
            qnList: [],
            curDT: { title: "", desc: "", userGroupIdList: [], startTime: "", endTime: "", questionnaireIdList: [] }
        }
    },
    methods: {
        createDTDrawer() {
            this.dtDrawerVisible = true
            this.curDT = { title: "", desc: "", userGroupIdList: "", startTime: "", endTime: "" }
        },
        async editDT(dt) {
            this.curDT = dt
            this.dtDrawerVisible = true
        },
        async createDT(dt) {
            if (dt.userGroupIdList == "") {
                dt.userGroupIdList = []
            }
            this.curDT = dt
            this.dtDrawerVisible = true
            const userStore = useUserStore();
            let rs = await POST('/distributeTask/createDT', 'POST', { title: dt?.title, desc: dt?.desc, id: dt?.id || null, userGroupIdList: dt?.userGroupIdList, questionnaireIdList: dt?.questionnaireIdList, startTime: dt?.startTime, endTime: dt?.endTime }, false, null, true)
            // this.DTList = rs.data
            console.log(rs)
            if (rs.code == 200) {
                location.reload();
            }
        },
        async getDTList() {
            const userStore = useUserStore();
            let rs = await POST('/distributeTask/getDTListByUser', 'POST', userStore.userInfo, false, null, false)
            this.dtList = rs.data
            console.log("this.dtList:::", this.dtList)
        },
        async deleteDTByID(DT) {
            let rs = await POST('/distributeTask/deleteDTByID', 'POST', { id: DT.id }, true, null, true)
            console.log("删除用户自己创建的问卷结果:::", rs)
            if (rs.code == 200) {
                location.reload();
            }

        },

        async getUGListByUser() {
            const userStore = useUserStore();
            let rs = await POST('/user/getUGListByUser', 'POST', userStore.userInfo, false, null, false)
            if (rs.code == 200) {
                this.ugList = rs.data
                console.log("getUGListByUser:::", this.ugList)
            }

        },

        async getQNListByUser() {
            const userStore = useUserStore();
            let rs = await POST('/questionnaire/getQNListByUser', 'POST', userStore.userInfo, false, null, false)
            if (rs.code == 200) {
                this.qnList = rs.data
                console.log("qnList:::", this.qnList)
            }

        }
    },
    mounted() {
        this.getUGListByUser()
        this.getDTList()
        this.getQNListByUser()
    }
}
</script>
<style></style>